<template>
	<view class="content">
		<view class="input-group">
			<view class="input-row border" style="padding-top: 10upx;padding-bottom: 10upx;">
				<m-input class="m-input" type="text" clearable focus v-model="account" placeholder="请输入标题"></m-input>
			</view>
			<view style="background-color: #efeff4;width: 100%;height: 10upx;"></view>
			<view class="uni-padding-wrap uni-common-mt">
				<view class="demo">
					<block v-if="imageSrc"><image :src="imageSrc" class="image" mode="widthFix"></image></block>
					<block v-else><view class="uni-hello-addfile" @click="chooseImage">+ 选择图片</view></block>
				</view>
			</view>
			<view style="background-color: #efeff4;width: 100%;height: 10upx;"></view>
			<view class="input-row"><textarea @blur="bindTextAreaBlur" placeholder="内容" style="padding: 10upx;"></textarea></view>
			<view style="background-color: #efeff4;width: 100%;height: 10upx;"></view>

			<!-- <view class="input-row" style="padding-top: 10upx;padding-bottom: 10upx;">
				附件：
				<view ref="input" class="input" name='link'></view>
			</view> -->
		</view>
		<view class="btn-row"><button type="primary" class="primary" @tap="bindLogin">发布</button></view>
	</view>
</template>

<script>
import service from '../../service.js';
import { mapState, mapMutations } from 'vuex';
import mInput from '../../components/m-input.vue';

export default {
	components: {
		mInput
	},
	data() {
		return {
			providerList: [],
			hasProvider: false,
			account: '',
			password: '',
			imageSrc: '',
			content: '',
			positionTop: 0
		};
	},
	onUnload() {
		this.imageSrc = '';
	},
	mounted() {
// 		var input = document.createElement('input');
// 		input.type = 'file';
// 		input.onchange = event => {
// 			console.log(event);
// 		};
// 		this.$refs.input.$el.appendChild(input);
	},
	computed: mapState(['forcedLogin']),
	methods: {
		...mapMutations(['login']),
		initPosition() {
			/**
			 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
			 * 反向使用 top 进行定位，可以避免此问题。
			 */
			this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
		},
		bindTextAreaBlur: function(e) {
			this.content = e.detail.value;
			console.log(e.detail.value);
		},
		chooseImage: function() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album'],
				success: res => {
					console.log('chooseImage success, temp path is', res.tempFilePaths[0]);
					var imageSrc = res.tempFilePaths[0];
					uni.uploadFile({
						url: service.host + 'ajaxfileupload.htm',
						filePath: imageSrc,
						fileType: 'image',
						name: 'picUrl1',
						success: res => {
							console.log('uploadImage success, res is:', res);
							uni.showToast({
								title: '上传成功',
								icon: 'success',
								duration: 1000
							});
							var dataObj = JSON.parse(res.data);
							this.imageSrc = service.host + dataObj[0].fileStorageName;
						},
						fail: err => {
							console.log('uploadImage fail', err);
							uni.showModal({
								content: err.errMsg,
								showCancel: false
							});
						}
					});
				},
				fail: err => {
					console.log('chooseImage fail', err);
				}
			});
		},
		bindLogin() {
			uni.request({
				url: service.host + 'save.htm',
				method: 'GET',
				data: {
					title: this.account,
					'category.id': '24',
					'articleData.content': this.content,
					image: this.imageSrc.replace(service.host,'')
				},
				success: res => {
					if (res.data.code == '1') {
						this.login(res.data.data);
						uni.reLaunch({
							url: '../main/main'
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: '数据格式不正确'
						});
					}
				},
				fail: () => {},
				complete: () => {}
			});
		}
	},
	onLoad() {
		this.initPosition();
	}
};
</script>

<style>
.image {
	width: 100%;
}

.demo {
	background: #fff;
	padding: 50upx;
}
.action-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.action-row navigator {
	color: #007aff;
	padding: 0 20upx;
}

.oauth-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.oauth-image {
	width: 100upx;
	height: 100upx;
	border: 1upx solid #dddddd;
	border-radius: 100upx;
	margin: 0 40upx;
	background-color: #ffffff;
}

.oauth-image image {
	width: 60upx;
	height: 60upx;
	margin: 20upx;
}
</style>
